<template>
	<view class="content">
		<view style="height: 1rpx;"></view>
		<!-- 列表 -->
		<view class="lists ab_shadow" v-if="false">
			<view class="lists_li">
				<view class="li_left">
					<view class="left_span"><text>关于我们</text></view>
				</view>
				<view class="li_right"><text class="iconfont icon-xiangyou2"></text></view>
			</view>
		</view>
		<!-- 列表 end-->
		
		<!-- 退出登录 -->
		<view class="dengl" @click="tcdlClick">
			<text>退出登录</text>
		</view>
		<!-- 退出登录 end-->
		
	</view>
</template>

<script setup>
	import { ref } from "vue"
	
	//引入用户相关的小仓库
	import useUserStore from '@/store/user.js'
	const UserStore = useUserStore()
	
	//引入用户相关的小仓库
	import useCustomerStore from '@/store/customer.js'
	const useCustomer = useCustomerStore()
	
	//跳转判断
	import {outerHref} from '@/composables/outerHref.js'
	
	//退出登录
	function tcdlClick(){
		//打开app首次进入列表页
		useCustomer.customize=false;
		useCustomer.listTrue=false;
			//#ifdef APP
		// var track = uni.requireNativePlugin('AMap-Track');
		// track.stopTrack(UserStore.userInfo.track_info.sid, UserStore.userInfo.track_info.tid, UserStore.userInfo.track_info.trackId);
		// UserStore.startTrackTrue=true;
		
		//持续定位插件对象122
		const locs = uni.requireNativePlugin('AMap-Loc');
		var ret = locs.isLocationRunning();
		console.log(ret,'进入停止')
		if (ret == true) {
			console.log('进入停止')
			//停止定位
			locs.stopLocation();
		}
		// #endif 	
		UserStore.outLogin();
		
	}
	
</script>

<style lang="scss" scoped>
page,.content{
	background: #F5F5F5;
	// background: #fff;
	
	//#ifdef H5
	min-height: calc((100vh - 94px));
	// #endif 
	
	//#ifdef MP-WEIXIN || APP-PLUS
	min-height: 100vh;
	// #endif 
}
.dengl{
	border-radius: 12rpx;
	overflow: hidden;
	margin: 30rpx;
	position: relative;
	box-sizing: border-box;
	background-color: #16BB5D;
	color: #fff;
	font-size: 30rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s all;
}
.dengl:active{
	background-color: #1eb55f;
}
.popup{
	width: 600rpx;
	height: 226rpx;
	position: relative;
	.popup_top{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 138rpx;
		h3{
			font-size: 32rpx;
			font-weight: 500;
			color: #262626;
			line-height: 46rpx;
		}
		span{
			font-size: 28rpx;
			font-weight: 500;
			color: #595959;
			line-height: 40rpx;
			margin-top: 8rpx;
		}
	}
	.popup_conent{
		position:absolute;
		bottom: 0;
		right: 0;
		left: 0;
		display:flex;
		height: 88rpx;
		border-top: 2rpx solid #f5f5f5;
		.popup_list{
			flex: 1;
			justify-content:center;
			align-items: center;
			display: flex;
			font-size: 32rpx;
			font-weight: 500;
			color: #8c8c8c;	
			transition: 0.3s all;
		}
		.popup_list:active{
			background: #eee;				
		}
		.popup_list.on{
			color: #5297ff;
		}
		.popup_list:first-child{
			border-right: 2rpx solid #f5f5f5;
		}
	}
}
.ab_shadow{
	border-radius: 15rpx;
	box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	background: #fff;
}
.lists{
	margin-top: 30rpx;
	border-radius: 12rpx;
	overflow: hidden;
	margin: 30rpx;
	.lists_li{
		position: relative;
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		color: #080808;
		font-size: 30rpx;
		padding: 30rpx;
		// 
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		transition: 0.3s all;
		&:before {
			position: absolute;
			right: 30rpx;
			bottom: 0;
			left: 30rpx;
			height: 2rpx;
			background: #f8f8f8;
			content: "";
		}
		&:last-child:before {
			height: 0;
		}
		.li_left{
			display: flex;
			flex-direction: row;
			.left_icons{
				flex: none;
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont{
					font-size: 28rpx;
					color: #fff;
				}
			}
			.left_icons.n1{
				background-image: repeating-linear-gradient(45deg, #FF3181, #FF8331);
			}
			.left_icons.n2{
				background-image: repeating-linear-gradient(45deg, #A26FFC, #9D12FF);
			}
			.left_icons.n3{
				background-image: repeating-linear-gradient(45deg, #0FD893, #29ECBF);
			}
			.left_icons.n4{
				background-image: repeating-linear-gradient(45deg, #FEA921, #FBC000);
			}
			.left_span{
				font-size: 30rpx;
				color: #000;
			}
		}
	}
	.lists_li:active{
		background: #e8e8e8;
	}
}
</style>
